<template>
    
      <img :src="mapImg" :style="map1" />
      <img :src="mapImg" :style="map2" />
  
    
  
</template>

<script>
import { computed, onMounted, onUnmounted, ref } from "vue";
import mapImg from "../assets/map.jpg";
export default {
  name: "GameMap",
  setup() {
    const mapHeight = 538;
    const mapY1 = ref(0);
    const mapY2 = ref(-mapHeight);
    const speed = 6;
    let timer = null;

    const map1 = computed(() => {
      return {
        top: mapY1.value + "px",
      };
    });
    const map2 = computed(() => {
      return {
        top: mapY2.value + "px",
      };
    });

    onMounted(() => {
      timer = setInterval(() => {
        mapY1.value += speed;
        mapY2.value += speed;

        if (mapY1.value >= mapHeight) {
          mapY1.value = -mapHeight;
        }
        if (mapY2.value >= mapHeight) {
          mapY2.value = -mapHeight;
        }
      }, 20);
    });
    onUnmounted(() => {
      clearInterval(timer);
      timer = null;
    });
    return { map1, map2, mapImg };
  },
};
</script>

<style lang="stylus" scoped>
img
  position: absolute;
  width: 100%;
</style>